<template>
  <div class="sample-tutorial">
    <div class="sample-spreadsheets-container">
      <label style="font: bold 10pt arial">ToJson:</label>
      <gc-spread-sheets
        class="sample-spreadsheets"
        @workbookInitialized="initSpread"
      >
        <gc-worksheet></gc-worksheet>
      </gc-spread-sheets>
      <br />
      <label style="font: bold 10pt arial">FromJson:</label>
      <gc-spread-sheets
        class="sample-spreadsheets"
        @workbookInitialized="initSpread2"
      >
        <gc-worksheet></gc-worksheet>
      </gc-spread-sheets>
    </div>
    <div class="options-container">
      <div style="width: 290px">
        <label
          >This serializes the first Spread instance to a JSON object, and then
          deserializes that object into the second Spread instance.</label
        >
        <div class="option-row">
          <input
            type="button"
            value="Json Serialize"
            id="fromtoJsonBtn"
            @click="serialization"
          />
        </div>
        <div>
          <div class="container">
            <div class="row" style="margin-top: 10px">
              <div class="col-xs-12">
                <label>FromJSON Options:</label>
                <div style="margin-top: 10px">
                  <input
                    type="checkbox"
                    id="import_noFormula"
                    @change="changeImport_noFormula"
                  />
                  <label style="text-align: left" for="import_noFormula"
                    >Ignore Formula</label
                  >
                  <input
                    type="checkbox"
                    id="import_noStyle"
                    @change="changeImport_noStyle"
                  />
                  <label style="text-align: left" for="import_noStyle"
                    >Ignore Style</label
                  >
                </div>
                <div style="margin-top: 10px">
                  <input
                    type="checkbox"
                    id="import_rowHeaders"
                    @change="changeImport_rowHeaders"
                  />
                  <label style="text-align: left" for="import_rowHeaders"
                    >Treat the frozen columns as row headers</label
                  >
                </div>
                <div style="margin-top: 10px">
                  <input
                    type="checkbox"
                    id="import_columnHeaders"
                    @change="changeImport_columnHeaders"
                  />
                  <label style="text-align: left" for="import_columnHeaders"
                    >Treat the frozen rows as column headers</label
                  >
                </div>
                <div style="margin-top: 10px">
                  <input
                    type="checkbox"
                    id="import_donotrecalculateafterload"
                    @change="changeImport_donotrecalculateafterload"
                  />
                  <label
                    style="text-align: left"
                    for="import_donotrecalculateafterload"
                    >Avoid recalculation after load</label
                  >
                </div>
              </div>
            </div>
            <div class="row" style="margin-top: 20px">
              <div class="col-xs-12">
                <label>ToJSON Options:</label>
                <div style="margin-top: 10px">
                  <input
                    type="checkbox"
                    id="noFormula"
                    @change="changeNoFormula"
                  />
                  <label style="text-align: left" for="noFormula"
                    >Ignore Formula</label
                  >
                  <input type="checkbox" id="noStyle" @change="changeNoStyle" />
                  <label style="text-align: left" for="noStyle"
                    >Ignore Style</label
                  >
                </div>
                <div style="margin-top: 10px">
                  <input
                    type="checkbox"
                    id="SaveCustomRowHeaders"
                    @change="changeSaveCustomRowHeaders"
                  />
                  <label style="text-align: left" for="SaveCustomRowHeaders"
                    >Treat the row headers as frozen columns</label
                  >
                </div>
                <div style="margin-top: 10px">
                  <input
                    type="checkbox"
                    id="SaveCustomColumnHeaders"
                    @change="changeSaveCustomColumnHeaders"
                  />
                  <label style="text-align: left" for="SaveCustomColumnHeaders"
                    >Treat the column headers as frozen rows</label
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
//import * as data from "./data.mjs"
import GC from "@grapecity/spread-sheets";
import { GcSpreadSheets, GcWorksheet } from "@grapecity/spread-sheets-vue";

const spreadValue = ref(null);
const spread2 = ref(null);
const import_noFormula = ref(false);
const import_noStyle = ref(false);
const import_rowHeaders = ref(false);
const import_columnHeaders = ref(false);
const import_donotrecalculateafterload = ref(false);
const noFormula = ref(false);
const noStyle = ref(false);
const SaveCustomRowHeaders = ref(false);
const SaveCustomColumnHeaders = ref(false);

function fillSampleData(sheet, range) {
  for (var i = 0; i < range.rowCount; i++) {
    for (var j = 0; j < range.colCount; j++) {
      sheet.setValue(
        range.row + i,
        range.col + j,
        Math.ceil(Math.random() * 300)
      );
    }
  }
}


const initSpread = (spread) => {
  spreadValue.value = spread;
  let sheet = spread.getSheet(0);
  var spreadNS = GC.Spread.Sheets;
  sheet.suspendPaint();

  sheet.frozenRowCount(4);
  sheet.frozenColumnCount(4);

  sheet.addSpan(1, 1, 1, 3);
  sheet.setValue(1, 1, "Store");
  sheet.addSpan(1, 4, 1, 7);
  sheet.setValue(1, 4, "Goods");
  sheet.addSpan(2, 1, 1, 2);
  sheet.setValue(2, 1, "Area");
  sheet.addSpan(2, 3, 2, 1);
  sheet.setValue(2, 3, "ID");
  sheet.addSpan(2, 4, 1, 2);
  sheet.setValue(2, 4, "Fruits");
  sheet.addSpan(2, 6, 1, 2);
  sheet.setValue(2, 6, "Vegetables");
  sheet.addSpan(2, 8, 1, 2);
  sheet.setValue(2, 8, "Foods");
  sheet.addSpan(2, 10, 2, 1);
  sheet.setValue(2, 10, "Total");
  sheet.setValue(3, 1, "State");
  sheet.setValue(3, 2, "City");
  sheet.setValue(3, 4, "Grape");
  sheet.setValue(3, 5, "Apple");
  sheet.setValue(3, 6, "Potato");
  sheet.setValue(3, 7, "Tomato");
  sheet.setValue(3, 8, "SandWich");
  sheet.setValue(3, 9, "Hamburger");

  sheet.addSpan(4, 1, 7, 1);
  sheet.addSpan(4, 2, 3, 1);
  sheet.addSpan(7, 2, 3, 1);
  sheet.addSpan(10, 2, 1, 2);
  sheet.setValue(10, 2, "Sub Total:");
  sheet.addSpan(11, 1, 7, 1);
  sheet.addSpan(11, 2, 3, 1);
  sheet.addSpan(14, 2, 3, 1);
  sheet.addSpan(17, 2, 1, 2);
  sheet.setValue(17, 2, "Sub Total:");
  sheet.addSpan(18, 1, 1, 3);
  sheet.setValue(18, 1, "Total:");

  sheet.setValue(4, 1, "NC");
  sheet.setValue(4, 2, "Raleigh");
  sheet.setValue(7, 2, "Charlotte");
  sheet.setValue(4, 3, "001");
  sheet.setValue(5, 3, "002");
  sheet.setValue(6, 3, "003");
  sheet.setValue(7, 3, "004");
  sheet.setValue(8, 3, "005");
  sheet.setValue(9, 3, "006");
  sheet.setValue(11, 1, "PA");
  sheet.setValue(11, 2, "Philadelphia");
  sheet.setValue(14, 2, "Pittsburgh");
  sheet.setValue(11, 3, "007");
  sheet.setValue(12, 3, "008");
  sheet.setValue(13, 3, "009");
  sheet.setValue(14, 3, "010");
  sheet.setValue(15, 3, "011");
  sheet.setValue(16, 3, "012");

  sheet.setFormula(10, 4, "=SUM(E5:E10)");
  sheet.setFormula(10, 5, "=SUM(F5:F10)");
  sheet.setFormula(10, 6, "=SUM(G5:G10)");
  sheet.setFormula(10, 7, "=SUM(H5:H10)");
  sheet.setFormula(10, 8, "=SUM(I5:I10)");
  sheet.setFormula(10, 9, "=SUM(J5:J10)");

  sheet.setFormula(17, 4, "=SUM(E12:E17)");
  sheet.setFormula(17, 5, "=SUM(F12:F17)");
  sheet.setFormula(17, 6, "=SUM(G12:G17)");
  sheet.setFormula(17, 7, "=SUM(H12:H17)");
  sheet.setFormula(17, 8, "=SUM(I12:I17)");
  sheet.setFormula(17, 9, "=SUM(J12:J17)");

  for (var i = 0; i < 14; i++) {
    sheet.setFormula(
      4 + i,
      10,
      "=SUM(E" + (5 + i).toString() + ":J" + (5 + i).toString() + ")"
    );
  }

  sheet.setFormula(18, 4, "=E11+E18");
  sheet.setFormula(18, 5, "=F11+F18");
  sheet.setFormula(18, 6, "=G11+G18");
  sheet.setFormula(18, 7, "=H11+H18");
  sheet.setFormula(18, 8, "=I11+I18");
  sheet.setFormula(18, 9, "=J11+J18");
  sheet.setFormula(18, 10, "=K11+K18");

  sheet.getRange(1, 1, 3, 10).backColor("#F2F2F2");
  sheet.getRange(4, 1, 15, 3).backColor("#CFCFCF");
  sheet.getRange(1, 1, 3, 10).hAlign(spreadNS.HorizontalAlign.center);

  sheet
    .getRange(1, 1, 18, 10)
    .setBorder(new spreadNS.LineBorder("Black", spreadNS.LineStyle.thin), {
      all: true,
    });
  sheet
    .getRange(4, 4, 3, 6)
    .setBorder(new spreadNS.LineBorder("Black", spreadNS.LineStyle.dotted), {
      inside: true,
    });
  sheet
    .getRange(7, 4, 3, 6)
    .setBorder(new spreadNS.LineBorder("Black", spreadNS.LineStyle.dotted), {
      inside: true,
    });
  sheet
    .getRange(11, 4, 3, 6)
    .setBorder(new spreadNS.LineBorder("Black", spreadNS.LineStyle.dotted), {
      inside: true,
    });
  sheet
    .getRange(14, 4, 3, 6)
    .setBorder(new spreadNS.LineBorder("Black", spreadNS.LineStyle.dotted), {
      inside: true,
    });

  fillSampleData(sheet, new spreadNS.Range(4, 4, 6, 6));
  fillSampleData(sheet, new spreadNS.Range(11, 4, 6, 6));

  sheet.resumePaint();

};

const initSpread2 = (spread) => {
  spread2.value = spread;
  console.warn(1111,spread2);
};
const changeImport_noFormula = (e) => {
  import_noFormula.value = e.target.checked;
};
const changeImport_noStyle = (e) => {
  import_noStyle.value = e.target.checked;
};
const changeImport_rowHeaders = (e) => {
  import_rowHeaders.value = e.target.checked;
};
const changeImport_columnHeaders = (e) => {
  import_columnHeaders.value = e.target.checked;
};
const changeImport_donotrecalculateafterload = (e) => {
  import_donotrecalculateafterload.value = e.target.checked;
};
const changeNoFormula = (e) => {
  noFormula.value = e.target.checked;
};
const changeNoStyle = (e) => {
  noStyle.value = e.target.checked;
};
const changeSaveCustomRowHeaders = (e) => {
  SaveCustomRowHeaders.value = e.target.checked;
};
const changeSaveCustomColumnHeaders = (e) => {
  SaveCustomColumnHeaders.value = e.target.checked;
};
const serialization = () => {
  var jsonOptions = {
    ignoreFormula: import_noFormula.value,
    ignoreStyle: import_noStyle.value,
    frozenColumnsAsRowHeaders: import_rowHeaders.value,
    frozenRowsAsColumnHeaders: import_columnHeaders.value,
    doNotRecalculateAfterLoad: import_donotrecalculateafterload.value,
  };
  var serializationOption = {
    ignoreFormula: noFormula.value,
    ignoreStyle: noStyle.value,
    rowHeadersAsFrozenColumns: SaveCustomRowHeaders.value,
    columnHeadersAsFrozenRows: SaveCustomColumnHeaders.value,
  };

  console.warn(jsonOptions,serializationOption);
  //ToJson
  var spread1 = spreadValue.value;
  var jsonStr = JSON.stringify(spread1.toJSON({
    includeBindingSource: false
        }));
console.warn('shuju',jsonStr);
  //FromJson

  var spread22 = spread2.value;
  spread22.fromJSON(JSON.parse(jsonStr));
};
</script>

<style>
.sample-spreadsheets {
  height: 500px;
}
</style>
